<template>
  <div class="login-container">
    <el-form :model="form" :rules="rules" ref="ruleFormRef">
      <div class="title-container">
        <h3 class="title">用户登录</h3>
      </div>
      <el-form-item prop="userName">
        <!-- <el-icon :size="20">
          <Edit />
        </el-icon> -->
        <svg-icon icon="user" class="svg-container"></svg-icon>
        <el-input v-model="form.userName"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <!-- <el-icon :size="20">
          <Edit />
        </el-icon> -->
        <svg-icon icon="password" class="svg-container"></svg-icon>
        <el-input v-model="form.password" type="password"></el-input>
      </el-form-item>
      <el-button type="primary" @click="handlerLogin">用户登录</el-button>
    </el-form>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { Edit } from "@element-plus/icons-vue";
import { login } from "@/api/login";
import axios from "axios";
import { useStore } from "vuex";
const myStore = useStore();
const form = ref({
  userName: "d",
  password: "123",
});

const rules = ref({
  userName: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
});
const headers = {
  "Content-Type": "application/json",
  "Custom-Header": "value",
};
const ruleFormRef = ref(null);
const handlerLogin = () => {
  ruleFormRef.value.validate(async (valid, fields) => {
    if (valid) {
      //   console.log("submit!");
      //   axios
      //     .post(
      //       "/api/test/condition/login2",
      //       {
      //         userName: "d",
      //         password: "123",
      //       },
      //       { headers: headers }
      //     )
      //     .then(function (response) {
      //       console.log(response);
      //     })
      //     .catch(function (error) {
      //       console.log(error);
      //     });
      // 登录接口，放到store中
      // const res = await login(form.value);
      // console.log(res);

      // console.log("打印store");
      // console.log(useStore);

      myStore.dispatch("appLogin", form.value);
    } else {
      console.log("error submit!", fields);
    }
  });
};
</script>
<style scoped>
.el-form {
  width: 300px;
  margin: 100px auto;
  padding: 20px;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 10px #ccc;
  border-radius: 5px;
  background-color: #fff;
}

.el-form-item__label {
  text-align: left;
}

.el-button--primary {
  width: 100%;
}
</style>
